<template>
	<view class="page">
		<navbar :showBack="true" :showMenu="false" :isDocument="true" bgc="#fff" iconColor="black">
			<view class="search">
				<u-search :placeholder="defaultSearch.showKeyword" v-model="searchValue" @search="search" @custom="search" bg-color="#f7f7f7"
				 height="60" :show-action="true"></u-search>
			</view>
		</navbar>

		<!-- swiper指示器 -->
		<scroll-view scroll-x="true" style="width: 750rpx;" :scroll-left="scrollLeft" :scroll-with-animation="true">
			<view class="pageIndicator">
				<view class="pageIndicatorItem" v-for="(item,index) in swiperList" :key="index" @click="changeSwiper(item.type, index)">
					<text>{{item.name}}</text>
				</view>
				<view class="activeBar" :style="{ left: (currentSwiper * 2 + 1) * 45 + 60 * currentSwiper + 'rpx', width: barWidth + 'rpx' }"></view>
			</view>
		</scroll-view>

		<swiper :duration="300" :current="currentSwiper" @change="change" :style="{ height: screenHeight - (currentMusicId ? 200 : 100) - navbarHeight + 'rpx' }">
			<!-- 综合搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="generalData.loading" text="loading..."></Loading>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="swiper-item general">
						<!-- 歌手 -->
						<view class="artist" v-if="generalData.artist.artists[0].id != undefined">
							<view class="artistImg">
								<image :src="generalData.artist.artists[0].img1v1Url" mode="heightFix"></image>
							</view>
							<view class="artistDetail">
								<view class="info">
									<text>歌手: {{generalData.artist.artists[0].name}}</text>
									<text v-if="generalData.artist.artists[0].alia.length > 0"> ({{ generalData.artist.artists[0].alia[0] }})</text>
								</view>
								<view class="nums">
									<text>专辑: {{ generalData.artist.artists[0].albumSize }}</text>
									<text>MV: {{ generalData.artist.artists[0].mvSize }}</text>
								</view>
							</view>
						</view>

						<!-- 单曲 -->
						<view class="singleSongs" v-if="generalData.song.songs.length">
							<view class="header">
								<text style="font-weight: bolder;color: #000;">单曲</text>
								<view class="playSingleSongs" @click="playSingleSongs(generalData.song.songs)">
									<image src="/static/images/bar-play.png" mode="widthFix"></image>
									<text>播放</text>
								</view>
							</view>
							<view class="songItem" v-for="(item,index) in generalData.song.songs" :key="index" @click="playMusic(item.id)">
								<view class="songItemLeft">
									<view class="songName">
										<text>{{item.name}}</text>
										<text v-if="item.alia.length" style="color: #ababab;margin-left: 4px;">({{item.alia[0]}})</text>
									</view>
									<view class="songItemInfo">
										<image v-if="item.originCoverType == 1" src="/static/images/originCover.png" mode="widthFix" style="width: 40rpx;border-radius: 5rpx;"></image>
										<image v-if="item.fee != 8" src="/static/images/VIPIcon.png" mode="heightFix"></image>
										<image v-if="item.fee != 8" src="/static/images/testListen.png" mode="heightFix" style="height: 32rpx;"></image>
										<text>{{item.ar[0].name}} - </text>
										<text>{{item.al.name}}</text>
									</view>
								</view>
								<view class="songItemRight">
									<image v-show="item.mv != 0" src="/static/images/mv.png" mode="widthFix" @click.stop="playMv(item.mv)"></image>
									<image src="/static/images/more-g.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="footer" @click="currentSwiper = 1">
								<text>{{ generalData.song.moreText }}</text>
								<image src="/static/images/gd-g.png" mode="widthFix"></image>
							</view>
						</view>

						<!-- 歌单 -->
						<view class="songList" v-if="generalData.songListDate">
							<card :dataList="generalData.songListDate" showFooter showShadow>
								<text slot="cardName">歌单</text>
								<view class="footer" slot="footer" @click="currentSwiper = 2">
									<text>{{ generalData.playList.moreText }}</text>
									<image src="/static/images/gd-g.png" mode="widthFix"></image>
								</view>
							</card>
						</view>

						<!-- 视频 -->
						<view class="video" v-if="generalData.videoDate">
							<card :dataList="generalData.videoDate" showFooter>
								<text slot="cardName">视频</text>
								<view class="footer" slot="footer" @click="currentSwiper = 3">
									<text>{{ generalData.video.moreText }}</text>
									<image src="/static/images/gd-g.png" mode="widthFix"></image>
								</view>
							</card>
						</view>

						<!-- 相关搜索 -->
						<view class="likeSearch" v-if="generalData.sim_query.sim_querys.length">
							<view class="header">
								<text>相关搜索</text>
							</view>
							<view class="item" @click="changeSearch(item.keyword)" v-for="(item,index) in generalData.sim_query.sim_querys"
							 :key="index">
								<text>{{item.keyword}}</text>
							</view>
						</view>

						<!-- 歌手 -->
						<view class="singer" v-if="generalData.artist.artists[0].id != undefined">
							<view class="header">
								<text>歌手</text>
							</view>
							<view class="item" v-for="(item,index) in generalData.artist.artists" :key="index">
								<image :src="item.img1v1Url" mode="widthFix"></image>
								<view class="singerInfo">
									<view class="name">
										<text>{{item.name}}</text>
										<text v-if="item.alia.length" style="color: #ababab;margin-left: 4px;">({{item.alia[0]}})</text>
									</view>
									<!-- <view class="settled">
										<image src="/static/images/settled.png" mode="widthFix"></image>
										<text>已入驻</text>
									</view> -->
								</view>
							</view>
							<view class="footer" @click="currentSwiper = 5">
								<text>{{ generalData.artist.moreText }}</text>
								<image src="/static/images/gd-g.png" mode="widthFix"></image>
							</view>
						</view>

						<!-- 专辑 -->
						<view class="album" v-if="generalData.albumDate">
							<card :dataList="generalData.albumDate" showFooter showAlbum>
								<text slot="cardName">专辑</text>
								<view class="footer" slot="footer" @click="currentSwiper = 4">
									<text>{{ generalData.album.moreText }}</text>
									<image src="/static/images/gd-g.png" mode="widthFix"></image>
								</view>
							</card>
						</view>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 单曲搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="singleSongData.loading == true" text="loading..."></Loading>
				<scroll-view class="singleSong" scroll-y="true" style="height: 100%;" @scrolltolower="singleSongLoadMore">
					<view class="swiper-item">
						<view class="header" v-if="singleSongData.songs.length" @click="playSingleSongs(singleSongData.songs)">
							<view class="playBtn">
								<image src="/static/images/play-ws.png" mode="widthFix"></image>
							</view>
							<text style="font-weight: bolder;color: #000;">播放全部</text>
						</view>
						<view class="songItem" v-for="(item,index) in singleSongData.songs" :key="index" @click="playMusic(item.id)">
							<view class="songItemLeft">
								<view class="songName">
									<text :style="{ color: currentMusicId == item.id ? '#ff483b' : '' }">{{item.name}}</text>
									<text v-if="item.alias.length" style="color: #ababab;margin-left: 4px;">({{item.alias[0]}})</text>
								</view>
								<view class="songItemInfo">
									<image v-if="item.originCoverType == 1" src="/static/images/originCover.png" mode="widthFix" style="width: 40rpx;border-radius: 5rpx;"></image>
									<image v-if="item.fee != 8" src="/static/images/VIPIcon.png" mode="heightFix"></image>
									<image v-if="item.fee != 8" src="/static/images/testListen.png" mode="heightFix" style="height: 32rpx;"></image>
									<text>{{item.artists[0].name}} - </text>
									<text>{{item.album.name}}</text>
								</view>
							</view>
							<view class="songItemRight">
								<image v-show="item.mvid != 0" src="/static/images/mv.png" mode="widthFix" @click.stop="playMv(item.mvid)"></image>
								<image src="/static/images/more-g.png" mode="widthFix"></image>
							</view>
						</view>
						<u-loadmore v-if="!singleSongData.loading" :status="singleSongLoading" icon-type="flower" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 歌单搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="songListData.loading == true" text="loading..."></Loading>
				<scroll-view class="songList" scroll-y="true" style="height: 100%;" @scrolltolower="songListLoadMore">
					<view class="swiper-item">
						<FullList :dataList="songListData.songList"></FullList>
						<u-loadmore v-if="!songListData.loading" :status="songListLoading" icon-type="flower" bg-color="#fff" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 视频搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="videoData.loading == true" text="loading..."></Loading>
				<scroll-view class="video" scroll-y="true" style="height: 100%;" @scrolltolower="videoLoadMore">
					<view class="swiper-item">
						<VideoList :videoList="videoData.videos"></VideoList>
						<u-loadmore v-if="!videoData.loading" :status="videoLoading" icon-type="flower" bg-color="#fff" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 专辑搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="albumData.loading == true" text="loading..."></Loading>
				<scroll-view class="album" scroll-y="true" style="height: 100%;" @scrolltolower="albumLoadMore">
					<view class="swiper-item">
						<FullList :dataList="albumData.albums" showAlbum></FullList>
						<u-loadmore v-if="!albumData.loading" :status="albumLoading" icon-type="flower" bg-color="#fff" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 歌手搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="singerData.loading == true" text="loading..."></Loading>
				<scroll-view class="singer" scroll-y="true" style="height: 100%;"  @scrolltolower="singerLoadMore">
					<view class="swiper-item">
						<view class="item" v-for="(item,index) in singerData.singers" :key="index">
							<image :src="item.img1v1Url" mode="aspectFill"></image>
							<view class="singerInfo">
								<view class="name">
									<text>{{item.name}}</text>
									<text v-if="item.alia.length" style="color: #ababab;margin-left: 4px;">({{item.alia[0]}})</text>
								</view>
								<!-- <view class="settled">
									<image src="/static/images/settled.png" mode="widthFix"></image>
									<text>已入驻</text>
								</view> -->
							</view>
						</view>
						<u-loadmore v-if="!singerData.loading" :status="singerLoading" icon-type="flower" bg-color="#fff" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 歌词搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="lyricData.loading == true" text="loading..."></Loading>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="swiper-item">
						<text>暂未开发...</text>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- MV搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="MVData.loading == true" text="loading..."></Loading>
				<scroll-view class="MV" scroll-y="true" style="height: 100%;" @scrolltolower="MVloadMore">
					<view class="swiper-item">
						<VideoList :videoList="MVData.mvList" videoType="MV"></VideoList>
						<u-loadmore v-if="!MVData.loading" :status="MVLoading" icon-type="flower" bg-color="#fff" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 电台搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="FMData.loading == true" text="loading..."></Loading>
				<scroll-view class="FM" scroll-y="true" style="height: 100%;" @scrolltolower="FMloadMore">
					<view class="swiper-item">
						<FullList :dataList="FMData.fmList"></FullList>
						<u-loadmore v-if="!FMData.loading" :status="FMLoading" icon-type="flower" bg-color="#fff" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>
			
			<!-- 用户搜索 -->
			<swiper-item>
				<Loading isFullScreen :active="userData.loading == true" text="loading..."></Loading>
				<scroll-view class="user" scroll-y="true" style="height: 100%;" @scrolltolower="userLoadMore">
					<view class="swiper-item">
						<view class="userItem" v-for="(item,index) in userData.userList" :key="index" @click="toUserDetail(item.userId)">
							<view class="userImg">
								<image :src="item.avatarUrl" mode="widthFix"></image>
								<image v-if="item.authStatus == 1" src="/static/images/wyauth.png" mode="widthFix"></image>
							</view>
							<view class="userInfo">
								<view class="left">
									<view class="userName">
										<text>{{item.nickname}}</text>
										<image v-if="item.gender == 1" src="/static/images/men.png" mode="widthFix"></image>
										<image v-if="item.gender == 0" src="/static/images/women.png" mode="widthFix"></image>
									</view>
									<view class="userDesc">
										<text>{{item.description || item.description || item.detailDescription || item.signature}}</text>
									</view>
								</view>
								<view class="right" v-if="item.followed == false" @click.stop="followeUser(item, 1)">
									<text>+</text>
									<text>关注</text>
								</view>
								<view class="right2" v-if="item.followed == true" @click.stop="followeUser(item, 0)">
									<text>✔</text>
									<text>已关注</text>
								</view>
							</view>
						</view>
						<u-loadmore v-if="!userData.loading" :status="userLoading" icon-type="flower" bg-color="#fff" :load-text="loadText" />
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<playMusicBar></playMusicBar>

	</view>
</template>

<script>
	import Navbar from '@/components/navbar.vue'
	import Card from '@/components/card.vue'
	import FullList from '@/components/fullList.vue'
	import VideoList from '@/components/videoList.vue'
	import Loading from '@/components/loading/loading.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		search
	} from '@/api/search.js'
	import { followUser } from '@/api/user.js'
	export default {
		components: {
			Navbar,
			Card,
			Loading,
			FullList,
			VideoList
		},
		data() {
			return {
				// 搜索关键字
				searchValue: '',
				// swiper列表
				swiperList: [{
						name: '综合',
						type: '1018'
					},
					{
						name: '单曲',
						type: '1'
					},
					{
						name: '歌单',
						type: '1000'
					},
					{
						name: '视频',
						type: '1014'
					},
					{
						name: '专辑',
						type: '10'
					},
					{
						name: '歌手',
						type: '100'
					},
					{
						name: '歌词',
						type: '1006'
					},
					{
						name: 'M V',
						type: '1004'
					},
					{
						name: '电台',
						type: '1009'
					},
					{
						name: '用户',
						type: '1002'
					}
				],
				// 当前页面索引
				currentSwiper: 0,
				// 指示条宽度
				barWidth: 60,
				// 指示tab栏的左偏移像素
				scrollLeft: 0,
				// 下拉刷新组件文本
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				// 单曲搜索页面的下拉加载状态
				singleSongLoading: 'loadmore',
				// 单曲搜索页面数据页码
				singleSongPage: 0,
				// 歌单搜索页面的下拉加载状态
				songListLoading: 'loadmore',
				// 歌单搜索页面数据页码
				songListPage: 0,
				// 视频搜索页面的下拉加载状态
				videoLoading: 'loadmore',
				// 视频搜索页面数据页码
				videoPage: 0,
				// 专辑搜索页面的下拉加载状态
				albumLoading: 'loadmore',
				// 专辑搜索页面数据页码
				albumPage: 0,
				// MV搜索页面的下拉加载状态
				MVLoading: 'loadmore',
				// MV搜索页面数据页码
				MVPage: 0,
				// FM搜索页面的下拉加载状态
				FMLoading: 'loadmore',
				// FM搜索页面数据页码
				FMPage: 0,
				// 歌手搜索页面的下拉加载状态
				singerLoading: 'loadmore',
				// 歌手搜索页面数据页码
				singerPage: 0,
				// 用户搜索页面的下拉加载状态
				userLoading: 'loadmore',
				// 用户搜索页面数据页码
				userPage: 0,
				// 综合搜索数据
				generalData: {
					song: {
						songs: []
					},
					video: {},
					sim_query: {
						sim_querys: []
					},
					artist: {
						artists: [{
							alia: [],
							img1v1Url: ''
						}]
					},
					loading: true
				},
				// 单曲搜索数据
				singleSongData: {
					songs: [],
					loading: true
				},
				// 歌单搜索数据
				songListData: {
					singList: [],
					loading: true
				},
				// 视频搜索数据
				videoData: {
					videos: [],
					loading: true
				},
				// 专辑搜索数据
				albumData: {
					albums: [],
					loading: true
				},
				// 歌手搜索数据
				singerData: {
					singers: [{
						alia: [],
						img1v1Url: '',
					}],
					loading: true
				},
				// 歌词搜索数据
				lyricData: {
					loading: true
				},
				// MV搜索数据
				MVData: {
					mvList: [],
					loading: true
				},
				// 电台搜索数据
				FMData: {
					fmList: [],
					loading: true
				},
				// 用户搜索数据
				userData: {
					userList: [],
					loading: true
				}
			}
		},
		onLoad(data) {
			this.searchValue = data.keyWord
			this.search()
		},
		watch: {
			currentSwiper(e) {
				if (e > 1 && e < 8) {
					this.scrollLeft = (150 * (this.currentSwiper - 2)) / this.pixelRatio
				}
				this.getSearchData(e)
			}
		},
		computed: {
			...mapState(['defaultSearch', 'pixelRatio', 'screenHeight', 'navbarHeight', 'currentMusicId'])
		},
		methods: {
			...mapMutations(['changePlayList', 'changeCurrentMusicId']),
			search() {
				if(this.searchValue == '2020年度听歌报告') {
					uni.navigateTo({
						url: `/components/webView?url=https://st.music.163.com/c/year2020/index.html?refer=search&full_screen=true&eid=`
					})
				} else {
					this.setSearchHistory()
					this.clearSearchResult()
					search(this.searchValue || this.defaultSearch.realkeyword, 1018).then(res => {
						this.generalData = Object.assign(this.generalData, res.data.result)
						// 筛选歌单数据
						if (JSON.stringify(this.generalData.playList) != '{}' && this.generalData.playList != undefined) {
							this.generalData.songListDate = []
							this.generalData.playList.playLists.forEach((item, index) => {
								this.generalData.songListDate.push({})
								this.generalData.songListDate[index].type = 'songList',
									this.generalData.songListDate[index].id = item.id
								this.generalData.songListDate[index].img = item.coverImgUrl
								this.generalData.songListDate[index].title = item.name
								this.generalData.songListDate[index].subTitle =
									`${item.trackCount}首, \xa0 播放${this.$tools.calcPlayCount(item.playCount)}次`
							})
						}
						// 筛选视频数据
						if (JSON.stringify(this.generalData.video) != '{}' && this.generalData.video != undefined) {
							this.generalData.videoDate = []
							this.generalData.video.videos.forEach((item, index) => {
								this.generalData.videoDate.push({})
								this.generalData.videoDate[index].type = 'video',
									this.generalData.videoDate[index].id = item.vid
								this.generalData.videoDate[index].img = item.coverUrl
								this.generalData.videoDate[index].title = item.title
								this.generalData.videoDate[index].subTitle =
									`${this.$tools.StoM(item.durationms / 1000)}, \xa0 by ${item.creator[0].userName}, \xa0 ${this.$tools.calcPlayCount(item.playTime)}播放`
							})
						}
						// 筛选专辑数据
						if (JSON.stringify(this.generalData.album) != '{}' && this.generalData.album != undefined) {
							this.generalData.albumDate = []
							this.generalData.album.albums.forEach((item, index) => {
								this.generalData.albumDate.push({})
								this.generalData.albumDate[index].type = 'album',
									this.generalData.albumDate[index].id = item.id
								this.generalData.albumDate[index].img = item.picUrl
								this.generalData.albumDate[index].title = item.name
								this.generalData.albumDate[index].subTitle =
									`${item.artist.name} \xa0 ${this.$tools.timestampToTime2(item.publishTime)}`
							})
						}
						//处理歌手数据
						if (JSON.stringify(this.generalData.artist) != '{}' && this.generalData.artist.artists != undefined) {
							this.generalData.artist.artists.forEach(item => {
								item.alia == '' || item.alia == undefined ? item.alia = [] : ''
								item.img1v1Url == undefined ? item.img1v1Url = '' : ''
							})
						}
						this.generalData.loading = false
					})
				}
			},
			// 修改搜索关键字并搜索
			changeSearch(keyWord) {
				this.setSearchHistory()
				this.clearSearchResult() // 清空当前搜搜结果并初始化
				this.searchValue = keyWord
				this.search()
			},
			// 清空当前搜索结果并初始化数据
			clearSearchResult() {
				this.currentSwiper = 0,
					this.barWidth = 60,
					this.scrollLeft = 0,
					this.generalData = {
						song: {
							songs: []
						},
						video: {},
						sim_query: {
							sim_querys: []
						},
						artist: {
							artists: [{
								alia: [],
								img1v1Url: ''
							}]
						},
						loading: true
					},
					this.singleSongData = {
						songs: [],
						loading: true
					},
					this.songListData = {
						songList: [],
						loading: true
					},
					this.videoData = {
						videos: [],
						loading: true
					},
					this.albumData = {
						albums: [],
						loading: true
					},
					this.singerData = {
						singers: [],
						loading: true
					},
					this.lyricData = {
						loading: true
					},
					this.MVData = {
						mvList: [],
						loading: true
					},
					this.FMData = {
						fmList: [],
						loading: true
					},
					this.userData = {
						userList: [],
						loading: true
					}
			},
			// 每次搜索时修改搜索历史
			setSearchHistory() {
				let searchHistory = uni.getStorageSync('searchHistory') ? uni.getStorageSync('searchHistory') : []
				let index = searchHistory.findIndex(item => item == this.searchValue || this.defaultSearch.realkeyword)
				if(index == -1) {
					searchHistory.unshift(this.searchValue || this.defaultSearch.realkeyword)
					uni.setStorageSync('searchHistory', searchHistory)
				} else {
					searchHistory.splice(index,1)
					searchHistory.unshift(this.searchValue || this.defaultSearch.realkeyword)
					uni.setStorageSync('searchHistory', searchHistory)
				}
			},
			// 点击tab切换swiper
			changeSwiper(type, index) {
				this.currentSwiper = index
				this.barWidth = 200
				setTimeout(() => {
					this.barWidth = 60
				}, 150)
			},
			// 滑动屏幕切换swiper
			change(e) {
				this.currentSwiper = e.detail.current
			},
			// 切换页面后获取搜索内容
			getSearchData(e) {
				switch (e) {
					case 0:
						if (this.generalData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1018).then(res => {
								this.generalData = res.data.result
								this.generalData.loading = false
							})
						}
						break
					case 1:
						if (this.singleSongData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1).then(res => {
								res.data.result.songs.map(item => item.ar = item.artists)
								this.singleSongData = res.data.result
								this.singleSongData.loading = false
							})
						}
						break
					case 2:
						if (this.songListData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1000).then(res => {
								// 筛选歌单数据
								if (res.data.result.hasMore == true) {
									this.songListData.songList = []
									res.data.result.playlists.forEach((item, index) => {
										this.songListData.songList.push({})
										this.songListData.songList[index].type = 'songList'
										this.songListData.songList[index].id = item.id
										this.songListData.songList[index].img = item.coverImgUrl
										this.songListData.songList[index].title = item.name
										this.songListData.songList[index].subTitle =
											`${item.trackCount}首, \xa0 by ${item.creator.nickname} \xa0 播放${this.$tools.calcPlayCount(item.playCount)}次`
									})
								}
								this.songListData.loading = false
							})
						}
						break
					case 3:
						// 处理视频数据
						if (this.videoData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1014).then(res => {
								this.videoData.videos = res.data.result.videos
								this.videoData.loading = false
							})
						}
						break
					case 4:
						if (this.albumData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 10).then(res => {
								// 筛选专辑数据
								if (res.data.result.albums != '' && res.data.result.albums != undefined) {
									res.data.result.albums.forEach((item, index) => {
										this.albumData.albums.push({})
										item.type = 'album'
										item.id = item.id
										item.img = item.picUrl
										item.title = item.name
										item.subTitle =
											`${item.artist.name} \xa0 ${this.$tools.timestampToTime2(item.publishTime)}`
									})
								}
								this.albumData.albums = res.data.result.albums
								this.albumData.loading = false
							})
						}
						break
					case 5:
						if (this.singerData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 100).then(res => {
								this.singerData.singers = res.data.result.artists
								//处理歌手数据
								if (JSON.stringify(this.singerData.singers) != '{}' && this.singerData.singers != undefined) {
									this.singerData.singers.forEach(item => {
										item.alia == '' || item.alia == undefined ? item.alia = [] : ''
										item.img1v1Url == undefined ? item.img1v1Url = '' : ''
									})
								}
								this.singerData.loading = false
							})
						}
						break
					case 6:
						if (this.lyricData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1006).then(res => {
								this.lyricData = res.data.result
								this.lyricData.loading = false
							})
						}
						break
					case 7:
						if (this.MVData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1004).then(res => {
								if (res.data.result.mvs != '' && res.data.result.mvs != undefined) {
									res.data.result.mvs.forEach(item => {
										item.vid = item.id
										item.coverUrl = item.cover
										item.playTime = item.playCount
										item.durationms = item.duration
										item.title = item.name
									})
									this.MVData.mvList = res.data.result.mvs
									this.MVData.loading = false
								} else {

								}
							})
						}
						break
					case 8:
						if (this.FMData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1009).then(res => {
								// 筛选专辑数据
								if (res.data.result.djRadios != '' && res.data.result.djRadios != undefined) {
									res.data.result.djRadios.forEach((item, index) => {
										this.FMData.fmList.push({})
										item.type = 'fm'
										item.id = item.id
										item.img = item.picUrl
										item.title = item.name
										item.subTitle =
											`▷${this.$tools.calcPlayCount(item.playCount)} \xa0 ♪ ${item.programCount} \xa0 ${item.dj.nickname}`
									})
								}
								this.FMData.fmList = res.data.result.djRadios
								this.FMData.loading = false
							})
						}
						break
					case 9:
						if (this.userData.loading == true) {
							search(this.searchValue || this.defaultSearch.realkeyword, 1002).then(res => {
								this.userData.userList = res.data.result.userprofiles
								this.userData.loading = false
							})
						}
						break
				}
			},
			// 播放音乐并修改播放列表
			playSingleSongs(songsList) {
				// let songs = { song: songsList }
				this.changeCurrentMusicId(songsList[0].id)
				this.changePlayList(songsList)
			},
			// 点击单曲项,播放音乐
			playMusic(id) {
				this.changeCurrentMusicId(id)
			},
			// 关注|取关用户
			followeUser(item,type) {
				followUser(item.userId, type).then(res => {
					item.followed = !item.followed
					uni.showToast({
						title: item.followed ? '已关注' : '已取消关注',
						icon: 'none'
					})
				})
			},
			// 跳转用户主页
			toUserDetail(id) {
				uni.navigateTo({
					url: `/pages/mine/userDetail?id=${id}`
				})
			},
			// 播放mv
			playMv(id) {
				uni.navigateTo({
					url: `/pages/video/MV/mvDetail?id=${id}`,
				})
			},
			// 单曲搜索页面下拉刷新
			singleSongLoadMore() {
				if (this.singleSongLoading == 'loading' || this.singleSongLoading == 'nomore') return
				this.singleSongLoading = 'loading'
				this.singleSongPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 1, 20, this.singleSongPage * 20).then(res => {
					res.data.result.songs.map(item => item.ar = item.artists)
					this.singleSongData.songs.push(...res.data.result.songs)
					this.singleSongLoading = 'loadmore'
				})
			},
			// 歌单搜索页面下拉刷新
			songListLoadMore() {
				if (this.songListLoading == 'loading' || this.songListLoading == 'nomore') return
				this.songListLoading = 'loading'
				this.songListPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 1000, 20, this.songListPage * 20).then(res => {
					if (res.data.result.hasMore == true) {
						res.data.result.playlists.forEach((item, index) => {
							item.type = 'songList'
							item.id = item.id
							item.img = item.coverImgUrl
							item.title = item.name
							item.subTitle =
								`${item.trackCount}首, \xa0 by ${item.creator.nickname} \xa0 播放${this.$tools.calcPlayCount(item.playCount)}次`
						})
						this.songListData.songList.push(...res.data.result.playlists)
						this.songListLoading = 'loadmore'
					} else {
						this.songListLoading = 'nomore'
					}
				})
			},
			// 视频搜索页面下拉刷新
			videoLoadMore() {
				if (this.videoLoading == 'loading' || this.videoLoading == 'nomore') return
				this.videoLoading = 'loading'
				this.videoPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 1014, 20, this.videoPage * 20).then(res => {
					if (res.data.result.hasMore == true) {
						this.videoData.videos.push(...res.data.result.videos)
						this.videoLoading = 'loadmore'
					} else {
						this.videoLoading = 'nomore'
					}
				})
			},
			// 专辑搜索页面下拉刷新
			albumLoadMore() {
				if (this.albumLoading == 'loading' || this.albumLoading == 'nomore') return
				this.albumLoading = 'loading'
				this.albumPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 10, 20, this.albumPage * 20).then(res => {
					if (res.data.result.albumCount >= this.albumPage * 20) {
						res.data.result.albums.forEach((item, index) => {
							item.type = 'album'
							item.id = item.id
							item.img = item.picUrl
							item.title = item.name
							item.subTitle =
								`${item.artist.name} \xa0 ${this.$tools.timestampToTime2(item.publishTime)}`
						})
						this.albumData.albums.push(...res.data.result.albums)
						this.albumLoading = 'loadmore'
					} else {
						this.albumLoading = 'nomore'
					}
				})
			},
			// 歌手搜索页面下拉刷新
			singerLoadMore() {
				if (this.singerLoading == 'loading' || this.singerLoading == 'nomore') return
				this.singerLoading = 'loading'
				this.singerPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 100, 20, this.singerPage * 20).then(res => {
					if (res.data.result.artistCount >= this.singerPage * 20) {
							res.data.result.artists.forEach(item => {
								item.alia == '' || item.alia == undefined ? item.alia = [] : ''
								item.img1v1Url == undefined ? item.img1v1Url = '' : ''
							})
						this.singerData.singers.push(...res.data.result.artists)
						this.singerLoading = 'loadmore'
					} else {
						this.singerLoading = 'nomore'
					}
				})
			},
			// MV搜索页面下拉刷新
			MVloadMore() {
				if (this.MVLoading == 'loading' || this.MVLoading == 'nomore') return
				this.MVLoading = 'loading'
				this.MVPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 1004, 20, this.MVPage * 20).then(res => {
					if (res.data.result.mvs != '' && res.data.result.mvs != undefined) {
						res.data.result.mvs.forEach(item => {
							item.vid = item.id
							item.coverUrl = item.cover
							item.playTime = item.playCount
							item.durationms = item.duration
							item.title = item.name
						})
						this.MVData.mvList.push(...res.data.result.mvs)
						this.MVLoading = 'loadmore'
					} else {
						this.MVLoading = 'nomore'
					}
				})
			},
			// FM搜索页面下拉刷新
			FMloadMore() {
				if (this.FMLoading == 'loading' || this.FMLoading == 'nomore') return
				this.FMLoading = 'loading'
				this.FMPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 1009, 20, this.FMPage * 20).then(res => {
					if (res.data.result.djRadiosCount >= this.FMPage * 20) {
						res.data.result.djRadios.forEach((item, index) => {
							this.FMData.fmList.push({})
							item.type = 'fm'
							item.id = item.id
							item.img = item.picUrl
							item.title = item.name
							item.subTitle =
								`▷${this.$tools.calcPlayCount(item.playCount)} \xa0 ♪ ${item.programCount} \xa0 ${item.dj.nickname}`
						})
						this.FMData.fmList.push(...res.data.result.djRadios)
						this.FMLoading = 'loadmore'
					} else {
						this.FMLoading = 'nomore'
					}
				})
			},
			// 用户搜索页面下拉刷新
			userLoadMore() {
				if (this.userLoading == 'loading' || this.userLoading == 'nomore') return
				this.userLoading = 'loading'
				this.userPage++
				search(this.searchValue || this.defaultSearch.realkeyword, 1002, 20, this.userPage * 20).then(res => {
					if (res.data.result.userprofileCount >= this.userPage * 20) {
						this.userData.userList.push(...res.data.result.userprofiles)
						this.userLoading = 'loadmore'
					} else {
						this.userLoading = 'nomore'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;

		/deep/ input {
			font-size: 24rpx !important;
		}
	}

	.pageIndicator {
		position: relative;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 1500rpx;
		height: 100rpx;
		background-color: #fff;

		.pageIndicatorItem {
			width: 60rpx;
			height: 100rpx;
			line-height: 100rpx;
		}

		.activeBar {
			position: absolute;
			bottom: 20rpx;
			left: 45rpx;
			width: 60rpx;
			height: 10rpx;
			transition: 0.3s ease-in;
			border-radius: 6rpx;
			background-color: $cloudMusic-tabActive-color;
		}
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	// 综合搜索内的样式
	.general {
		background-color: #f0f0f0;
		
		.artist {
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 150rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.artistImg {
				width: 110rpx;
				height: 110rpx;
				border-radius: 55rpx;
				overflow: hidden;

				image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 55rpx;
				}
			}

			.artistDetail {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 540rpx;
				height: 90rpx;
				padding-left: 20rpx;

				.info {
					font-size: 34rpx;
					font-weight: bolder;
				}

				.nums {
					color: #777;
					font-size: 26rpx;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}

		.singleSongs {
			width: 690rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 0 30rpx;
			margin-top: 20rpx;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 630rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 34rpx;

				.playSingleSongs {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 50rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
					border: 1px solid #ccc;

					image {
						width: 25rpx;
						margin-right: 2px;
					}
				}
			}

			.songItem {
				display: flex;
				align-items: center;
				width: 630rpx;
				height: 110rpx;
				border-top: 1rpx solid #eee;

				.songItemLeft {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 500rpx;
					height: 110rpx;

					.songName {
						font-size: 30rpx;
						color: #000;
						font-weight: 600;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.songItemInfo {
						display: flex;
						align-items: center;
						width: 500rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #777;
						font-size: 24rpx;

						text {
							&:last-child {
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}

						image {
							height: 20rpx;
							margin-right: 6rpx;
						}
					}
				}

				.songItemRight {
					position: relative;
					width: 130rpx;
					height: 110rpx;
					line-height: 110rpx;

					image {
						width: 40rpx;

						&:first-child {
							position: absolute;
							width: 45rpx;
							top: 35rpx;
							left: 0;
						}

						&:last-child {
							position: absolute;
							top: 35rpx;
							right: 0;
						}
					}
				}
			}

			.footer {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 630rpx;
				height: 80rpx;
				color: #adadad;
				font-size: 24rpx;
				border-top: 1rpx solid #eee;

				image {
					width: 25rpx;
				}
			}
		}

		.songList {
			width: 630rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.footer {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 630rpx;
				height: 80rpx;
				color: #adadad;
				font-size: 24rpx;
				border-top: 1rpx solid #eee;

				image {
					width: 25rpx;
				}
			}
		}

		.video {
			width: 630rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
			.footer {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 630rpx;
				height: 80rpx;
				color: #adadad;
				font-size: 24rpx;
				border-top: 1rpx solid #eee;

				image {
					width: 25rpx;
				}
			}
		}

		.likeSearch {
			display: inline-block;
			width: 690rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 0 30rpx 20rpx;
			margin-top: 20rpx;

			.header {
				width: 630rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 34rpx;
				color: #000;
				font-weight: bolder;
			}

			.item {
				display: inline-block;
				margin: 0 20rpx 20rpx 0;

				text {
					height: 80rpx;
					padding: 0 20rpx;
					border-radius: 40rpx;
					background-color: #f3f3f3;
				}
			}
		}

		.singer {
			width: 690rpx;
			border-radius: 20rpx;
			background-color: #fff;
			padding: 0 30rpx;
			margin-top: 20rpx;

			.header {
				width: 630rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 34rpx;
				color: #000;
				font-weight: bolder;
			}

			.item {
				display: flex;
				align-items: center;
				width: 630rpx;
				height: 100rpx;

				image {
					width: 80rpx;
					border-radius: 40rpx;
				}

				.singerInfo {
					width: 550rpx;
					height: 100rpx;
					padding: 0 20rpx;
					line-height: 100rpx;
				}
			}

			.footer {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 630rpx;
				height: 80rpx;
				color: #adadad;
				font-size: 24rpx;
				border-top: 1rpx solid #eee;

				image {
					width: 25rpx;
				}
			}
		}

		.album {
			margin-top: 20rpx;

			.footer {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 630rpx;
				height: 80rpx;
				color: #adadad;
				font-size: 24rpx;
				border-top: 1rpx solid #eee;

				image {
					width: 25rpx;
				}
			}
		}
	}

	// 单曲页面样式
	.singleSong {
		width: 750rpx;
		background-color: #fff;

		.swiper-item {
			width: 750rpx;
			padding: 0 30rpx;
		}

		.header {
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 34rpx;

			.playBtn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
				background-color: #ff483b;
				margin-right: 16rpx;

				image {
					width: 40rpx;
				}
			}
		}

		.songItem {
			display: flex;
			align-items: center;
			width: 690rpx;
			height: 110rpx;
			border-top: 1rpx solid #eee;

			.songItemLeft {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 560rpx;
				height: 110rpx;

				.songName {
					font-size: 30rpx;
					color: #000;
					font-weight: 600;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.songItemInfo {
					display: flex;
					align-items: center;
					width: 560rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: #777;
					font-size: 24rpx;

					text {
						&:last-child {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					image {
						height: 20rpx;
						margin-right: 6rpx;
					}
				}
			}

			.songItemRight {
				position: relative;
				width: 130rpx;
				height: 110rpx;
				line-height: 110rpx;

				image {
					width: 40rpx;

					&:first-child {
						position: absolute;
						width: 45rpx;
						top: 35rpx;
						left: 0;
					}

					&:last-child {
						position: absolute;
						top: 35rpx;
						right: 0;
					}
				}
			}
		}
	}

	// 歌单搜索页面样式
	.songList {
		width: 750rpx;
		padding: 0;

		.swiper-item {
			width: 750rpx;
			padding: 0;
		}
	}

	// 视频搜索页面样式
	.video {
		width: 750rpx;
		padding: 0;
		background-color: #fff;

		.swiper-item {
			width: 750rpx;
			padding: 0;
		}

	}

	// 专辑搜索页面样式
	.album {
		width: 750rpx;
		padding: 0;

		.swiper-item {
			width: 750rpx;
			padding: 0;
		}
	}

	// 歌手搜索页面样式
	.singer {
		width: 750rpx;
		padding: 0;
		background-color: #fff;

		.swiper-item {
			width: 750rpx;
			padding: 0 30rpx;
			background-color: #fff;

			.item {
				display: flex;
				align-items: center;
				width: 690rpx;
				height: 120rpx;
				overflow: hidden;
				z-index: 11;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
					z-index: 10;
				}

				.singerInfo {
					width: 590rpx;
					height: 120rpx;
					padding: 0 20rpx;
					line-height: 120rpx;
				}
			}
		}
	}

	// MV搜索页面样式
	.MV {
		width: 750rpx;
		padding: 0;
		background-color: #fff;

		.swiper-item {
			width: 750rpx;
			padding: 0;
		}

	}

	// FM搜索页面样式
	.FM {
		width: 750rpx;
		padding: 0;
		.swiper-item {
			width: 750rpx;
			padding: 0;
		}
	}
	
	// 用户搜索页面样式
	.user {
		width: 750rpx;
		padding: 0;
		background-color: #fff;
		.swiper-item {
			width: 750rpx;
			padding: 0;
			.userItem {
				display: flex;
				align-items: center;
				width: 750rpx;
				height: 120rpx;
				.userImg {
					position: relative;
					display: flex;
					align-items: center;
					width: 90rpx;
					height: 120rpx;
					margin: 0 30rpx;
					image {
						&:nth-child(1) {
							width: 90rpx;
							border-radius: 45rpx;
						}
						&:nth-child(2) {
							position: absolute;
							width: 30rpx;
							bottom: 10rpx;
							right: 0px;
						}
					}
				}
				.userInfo {
					display: flex;
					align-items: center;
					padding-right: 30rpx;
					width: 600rpx;
					height: 120rpx;
					border-bottom: 1rpx solid #eee;
					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						width: 440rpx;
						height: 120rpx;
						.userName {
							position: relative;
							color: #000;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							text {
								margin-right: 10rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							image {
								position: absolute;
								width: 20rpx;
								top: 10rpx;
								
							}
						}
						.userDesc {
							width: 440rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 24rpx;
							color: #888;
						}
					}
					.right {
						display: flex;
						justify-content: space-around;
						align-items: center;
						color: #f93f40;
						font-size: 26rpx;
						width: 130rpx;
						height: 60rpx;
						padding: 0 10rpx;
						border: 1px solid #f93f40;
						border-radius: 30rpx;
					}
					.right2 {
						display: flex;
						justify-content: space-around;
						align-items: center;
						color: #888;
						font-size: 26rpx;
						width: 130rpx;
						height: 60rpx;
						padding: 0 6rpx;
						border: 1px solid #888;
						border-radius: 30rpx;
					}
				}
			}
		}
	}
</style>
